/* @flow */
'use strict';

var React = require('react-native');

var {
	StyleSheet,
	View,
	TabBarIOS,
	Text
} = React;

var TabBarItem = TabBarIOS.Item;

var TabBarIOSView = React.createClass({

	_renderContent: function(color: string, contentText: string) {
		return (
			<View style={[styles.tabcontentStyle,{backgroundColor:color}]}>
				<Text>{contentText}</Text>
			</View>
		);
	},

	getInitialState: function() {
		return {
			selectedItem: '1'
		};
	},


	render: function() {
		return (
			<TabBarIOS 
				barTintColor = '#96C495'
				tintColor = '#4FC439'>
				<TabBarItem 
					title="第一个" 
					onPress={()=>this.setState({selectedItem:'1'})}
					selected={this.state.selectedItem === '1'}>
				{this._renderContent('#C47976','这是第一个Tab')}
				</TabBarItem>
				<TabBarItem 
					title="第二个"
					onPress={()=>this.setState({selectedItem:'2'})}
					selected={this.state.selectedItem === '2'}>
				{this._renderContent('#C4B70F','这是第二个Tab')}
				</TabBarItem>
				<TabBarItem 
					title="第三个"
					onPress={()=>this.setState({selectedItem:'3'})}
					selected={this.state.selectedItem === '3'}>
				{this._renderContent('#1CC4BE','这是第三个Tab')}
				</TabBarItem>
				<TabBarItem 
					title="第四个"
					onPress={()=>this.setState({selectedItem:'4'})}
					selected={this.state.selectedItem === '4'}>
				{this._renderContent('#AF99C4','这是第四个Tab')}
				</TabBarItem>

			</TabBarIOS>
		);
	}
});


var styles = StyleSheet.create({
	tabcontentStyle: {
		flex: 1,
		alignItems: 'center',
		marginTop: 64
	}
});


module.exports = TabBarIOSView;